<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    html,
    body,
    div.box {
      height: 100%;
      width: 100%;
    }

    div {
      box-sizing: border-box;
    }

    div.box {
      display: flex;
    }

    div.side {
      max-width: calc(50% + 2px);
      position: relative;
      height: 100%;
      outline: 1px solid greenyellow;
    }

    div.content {
      flex: 1;
      height: 100%;
      padding: 0 10px;
    }

    /* 侧边栏文本样式 */
    div.text {
      width: 100%;
      height: 100%;
      position: absolute;
      left: 0;
      top: 0;
      overflow: hidden;
      padding: 0 5px;
      background: #ffffff;
     
    }

    /*拖动按钮样式*/
    /*拖动bar盒时，父级盒side会被bar盒撑开，又因为text盒的宽高都设为100%，所以改变bar盒就是在改变text盒*/
    div.bar {
      width: 300px;
      height: 100%;
      margin-right: -2px;
      /* 因为bar盒子和text盒子是重合的所以必须设置一个负值才能看到我们的拖动按钮*/
      overflow: scroll;
      /* 可设置其他值来进行对别，只可意会，不可言传*/
      resize: horizontal;
      /*水平拖放*/
    }

    /*因为拖动按钮属于滚动条系列，所以可通过改变滚动来间接改变拖动按钮的样式*/
    div.bar::-webkit-scrollbar {
      width: 10px;
      height: 9999px
    }

    /*可设为100%或者其他数值来查看展示效果，只可意会，不可言传*/

    div.bar::-webkit-resizer {
      /* 设置拖放按钮的背景颜色 */
      background: skyblue;
    }
  </style>
</head>

<body>
  <div class="box">
    <div class="side">
      <div class="bar"></div>
      <div class="text">
        对酒当歌1，人生几何2！z
        譬如朝露，去日苦多3。
        慨当以慷4，忧思难忘。
        何以解忧？唯有杜康5。
        青青子衿，悠悠我心6。
        但为君故，沉吟至今7。
        呦呦鹿鸣，食野之苹。
        我有嘉宾，鼓瑟吹笙8。
        明明如月，何时可掇9？
        忧从中来，不可断绝。
        越陌度阡10，枉用相存11。
        契阔谈宴12，心念旧恩。
        月明星稀，乌鹊南飞。
        绕树三匝13，何枝可依？
        山不厌高，海不厌深14。
        周公吐哺，天下归心15。 [1]

      </div>
    </div>
    <div class="content">
      滕王阁序1
      豫章故郡，洪都新府2。星分翼轸，地接衡庐3。襟三江而带五湖4，控蛮荆而引瓯越5。物华天宝，龙光射牛斗之墟6；人杰地灵，徐孺下陈蕃之榻7。雄州雾列8，俊采星驰9。台隍枕夷夏之交10，宾主尽东南之美11。都督阎公之雅望，棨戟遥临；宇文新州之懿范，襜帷暂驻12。十旬休假13，胜友如云；千里逢迎14，高朋满座。腾蛟起凤，孟学士之词宗15；紫电清霜，王将军之武库16。家君作宰，路出名区；童子何知，躬逢胜饯17。
      时维九月，序属三秋18。潦水尽而寒潭清，烟光凝而暮山紫。俨骖騑于上路19，访风景于崇阿。临帝子之长洲，得天人之旧馆20。层峦耸翠，上出重霄；飞阁流丹，下临无地21。鹤汀凫渚，穷岛屿之萦回；桂殿兰宫，即冈峦之体势22。
      披绣闼，俯雕甍23，山原旷其盈视，川泽纡其骇瞩24。闾阎扑地，钟鸣鼎食之家；舸舰弥津，青雀黄龙之舳25。云销雨霁，彩彻区明26。落霞与孤鹜齐飞，秋水共长天一色。渔舟唱晚，响穷彭蠡之滨27，雁阵惊寒，声断衡阳之浦28。
      遥襟甫畅，逸兴遄飞29。爽籁发而清风生，纤歌凝而白云遏30。睢园绿竹，气凌彭泽之樽31；邺水朱华，光照临川之笔32。四美具33，二难并。穷睇眄于中天34，极娱游于暇日。天高地迥，觉宇宙之无穷；兴尽悲来，识盈虚之有数35。望长安于日下，目吴会于云间36。地势极而南溟深，天柱高而北辰远37。关山难越，谁悲失路之人；萍水相逢，尽是他乡之客。怀帝阍而不见，奉宣室以何年38？
      嗟乎！时运不齐39，命途多舛40。冯唐易老，李广难封41。屈贾谊于长沙，非无圣主42；窜梁鸿于海曲，岂乏明时43？所赖君子见机，达人知命44。老当益壮，宁移白首之心45？穷且益坚，不坠青云之志46。酌贪泉而觉爽，处涸辙以犹欢47。北海虽赊，扶摇可接48；东隅已逝，桑榆非晚49。孟尝高洁，空余报国之情50；阮籍猖狂，岂效穷途之哭51！
      勃，三尺微命52，一介书生。无路请缨，等终军之弱冠53；有怀投笔，慕宗悫之长风54。舍簪笏于百龄，奉晨昏于万里55。非谢家之宝树，接孟氏之芳邻56。他日趋庭，叨陪鲤对57；今兹捧袂，喜托龙门58。杨意不逢，抚凌云而自惜59；钟期既遇，奏流水以何惭60？
      呜乎！胜地不常，盛筵难再61；兰亭已矣62，梓泽丘墟63。临别赠言，幸承恩于伟饯；登高作赋，是所望于群公64。敢竭鄙怀，恭疏短引65；一言均赋，四韵俱成66。请洒潘江，各倾陆海云尔67。
      滕王高阁临江渚，佩玉鸣鸾罢歌舞。
      画栋朝飞南浦云，珠帘暮卷西山雨。
      闲云潭影日悠悠，物换星移几度秋。
      阁中帝子今何在？槛外长江空自流。 [2]
    </div>
  </div>
  <script>
    const bar = document.body.querySelector('.bar')
    const side = document.body.querySelector('.side')
    setInterval(() => {
      if (bar.offsetWidth > side.offsetWidth + 2) {
        bar.style.width = side.offsetWidth + 2 + 'px'
        console.log(bar.offsetWidth, side.offsetWidth);
      }
    })
  </script>

</body>

</html>